<template>
    <div>


            <p>jsonP跨域获取位置 {{addr}}</p>
            <p>jsonP跨域获取天气 {{weatherJson}}</p>

        <p>
            <b>服务器IP和地址 </b> <br>
            {{serverIpAndAddr.toolLuBack}} <br>
            {{serverIpAndAddr.chinaZBack}} <br>
            {{serverIpAndAddr.pconlineBack}}
        </p>

        <p>
            <b>请求设备 </b> <br>
            {{reqIp}} <br>
            {{reqClient.systemName}} <br>
            {{reqClient.deviceType}} <br>
            {{reqClient.browserName}} <br>
            {{reqClient.browserEngine}} <br>
            {{reqClient.browserVersion}} <br>
        </p>


    </div>
</template>

<script>
    import originJSONP from 'jsonp'


    export default {
        name: "TestTwo",
        data() {
            return {
                weatherJson:{},
                addr: '',
                reqIp: '',
                reqClient: {},
                serverIpAndAddr: {}
            }
        },
        created() {


            let url02 = 'http://whois.pconline.com.cn/ipJson.jsp';

            originJSONP(url02, {}, (err, data) => {
                console.log('????????????????===')
                if (!err) {
                    console.log(data)
                      this.addr = data;

                } else {
                    console.log(err)
                }
            });

           //  vue使用jsonp跨域要安装依赖
            //npm install jsonp
            // originJSONP函数介绍
            // originJSONP(url, opts, fn),有3个参数
            // 1.fn 回调方法，用es6 Promise
            // 2.url (String) 服务器端数据接口地址
            // 3.opts (Object) 一般只需关注param即可
                // 3.1 param (String) 默认是callback,这是与后端约定的参数名称，也可以随便定义，只要前后端统一
                // 3.2 timeout (Number) 请求超时时间，默认是6000ms
                // 3.3 prefix (String) callback值的前缀，默认是__jp
                // 3.4 name (String) 指定全局注册的回调方法名，一般不会用到，因为默认是prefix+自增数字
            //
            //后端接口返回的数据为字符串
            //ckp({"cityid":"101190201","date":"2020-11-14","week":"\u661f\u671f\u516d","update_time":"2020-11-14 11:35:50","city":"\u65e0\u9521","cityEn":"wuxi","country":"\u4e2d\u56fd","countryEn":"China","wea":"\u6674","wea_img":"qing","tem":"19","tem1":"21","tem2":"12","win":"\u4e1c\u98ce","win_speed":"2\u7ea7","win_meter":"\u5c0f\u4e8e12km\/h","humidity":"60%","visibility":"12.9km","pressure":"1028","air":"70","air_pm25":"70","air_level":"\u826f","air_tips":"\u7a7a\u6c14\u597d\uff0c\u53ef\u4ee5\u5916\u51fa\u6d3b\u52a8\uff0c\u9664\u6781\u5c11\u6570\u5bf9\u6c61\u67d3\u7269\u7279\u522b\u654f\u611f\u7684\u4eba\u7fa4\u4ee5\u5916\uff0c\u5bf9\u516c\u4f17\u6ca1\u6709\u5371\u5bb3\uff01","alarm":{"alarm_type":"","alarm_level":"","alarm_content":""}})
            //该字符串实际是把数据用ckp()函数包裹
            //ckp就是前后端约定的jsonP前缀
            let url4 = 'https://www.tianqiapi.com/api?version=v1&appid=85618448&appsecret=9ZfOvBsd&callback=ckp';
            let opts={
                prefix:'ckp'
            }
            //发起jsonP请求
            originJSONP(url4, opts, (err, data) => {
                console.log('????????????????===')
                if (!err) {
                    console.log(data);
                    this.weatherJson = data;
                } else {
                    console.log(err)
                }
            });


            this.$reqGlobal.get('/lte/getIpAddr').then(res => {
                console.log(res.data);
                this.serverIpAndAddr = res.data.data;
            });

            this.$reqGlobal.get('/lte/tip').then(res => {
                console.log(res.data);
                this.reqIp = res.data.data;
            });

            this.$reqGlobal.get('/lte/device').then(res => {
                console.log(res.data);
                this.reqClient = res.data.data;

            });
        }
    }
</script>

<style scoped>

</style>
